.beat{
  width: 70px;
  height: 70px;
  border-radius: 35px;
  background: transparent;
  border: 5px solid #fff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  div {
    width: 60px;
    height: 60px;
    border: 2px solid #000;
    box-sizing: border-box;
    border-radius: 35px;
    background: white;
    transition: all .1s ease-in-out;
    &.photo:active{
      border: 5px solid #000;
    }
    &.square:active{
      border: 5px solid #000;
    }
    &.pano:active{
      border: 5px solid #000;
    }
    &.video{
      background: red;
    }
    &.sloMo{
      background: red;
    }
    &.timeLapse{
      background: red;
    }
    &.video:active{
      width: 54px;
      height: 54px;
    }
    &.sloMo:active{
      width: 54px;
      height: 54px;
    }
    &.timeLapse:active{
      width: 54px;
      height: 54px;
    }
    &.delay-square{
      transition: all .3s ease;
      width: 35px;
      height: 35px;
      border-radius: 5px;
    }
  }
}